<template>
	<div>
		<div class="headerstyle">数据对比</div>
		<el-row>
		    <!-- 查询栏 -->
		    <el-form :inline="true">
		        <el-col :sm="6" :md="6" :lg="3" :xl="3">
		            <el-form-item>
		                 <el-autocomplete
		                      class="inline-input"
		                      v-model="state2"
		                      :fetch-suggestions="querySearch"
		                      placeholder="请填写井名"
		                      @select="handleSelect"
		                    ></el-autocomplete>
		            </el-form-item>
		        </el-col>
				<el-col :sm="6" :md="6" :lg="3" :xl="3">
				    <el-form-item>
				        <el-select v-model="casesize" clearable placeholder="请选择套管层次" style="width: 100%" :disabled='selectBool'>
				            <el-option
				                v-for="item in caselevelOptions"
				                :key="item"
				                :label="item"
				                :value="item"
				                :disabled="item.disabled"
				            >
				            </el-option>
				        </el-select>
				    </el-form-item>
				</el-col>
		        <el-col :sm="4" :md="4" :lg="2" :xl="1">
		            <el-form-item>
		                <el-button type="primary" @click="submitSearchModel">查询</el-button>
		            </el-form-item>
		        </el-col> 
		    </el-form>
		</el-row>
		<div class="headerstyle">水泥浆</div>
		<div>
			<div id="main" style="width: 600px;height: 400px;" v-show="option.series[0].data[0]"></div>
			<!-- <div v-else class="headerstyle">点击上方查询显示对比柱状图</div> -->
		</div>
		<div class="designstyle">设计水泥浆</div>
		<el-table
		    :data="designDensityAndSolidTime"
		    border
		    style="width: 100%">
			<el-table-column
			  prop="wellname"
			  label="井名"
			  width="80">
			</el-table-column>
		    <el-table-column
		      prop="bitsize"
		      label="钻头尺寸"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="caselevel"
		      label="套管层次"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="casesize"
		      label="套管尺寸"
			  width="80">
		    </el-table-column>
			<el-table-column
			  prop="cementcategory"
			  label="水泥类别"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="cementsection"
			  label="封固井段"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="cementslurydesignid"
			  label="ID"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="density"
			  label="密度"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="fluidity"
			  label="流动度"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="formula"
			  label="体系名称"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="freewater"
			  label="45°倾角自由液"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="lostwater"
			  label="失水量"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="no"
			  label="开钻次序"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="pressure24"
			  label="24h抗压强度"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="pressure48"
			  label="48h抗压强度"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="pressure72"
			  label="72h抗压强度"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="solidtime"
			  label="稠化时间"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="supply"
			  label="体系供应商"
			  width="80">
			</el-table-column>
			<el-table-column
			  prop="temptime"
			  label="过渡时间"
			  width="80">
			</el-table-column>
		  </el-table>
		  <div class="designstyle">实际水泥浆</div>
		  <el-table
		      :data="realDensityAndSolidTime"
		      border
		      style="width: 100%">
		  	<el-table-column
		  	  prop="wellname"
		  	  label="井名"
			  width="80">
		  	</el-table-column>
		      <el-table-column
		        prop="bitsize"
		        label="钻头尺寸"
		        width="80">
		      </el-table-column>
		      <el-table-column
		        prop="caselevel"
		        label="套管层次"
		        width="80">
		      </el-table-column>
		      <el-table-column
		        prop="casesize"
		        label="套管尺寸"
				width="80">
		      </el-table-column>
		  	<el-table-column
		  	  prop="cementcategory"
		  	  label="水泥类别"
		  	  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="cementsection"
		  	  label="封固井段"
		  	  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="cementslurydesignid"
		  	  label="ID"
			  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="density"
		  	  label="密度"
		  	  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="fluidity"
		  	  label="流动度"
		  	  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="formula"
		  	  label="体系名称"
			  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="freewater"
		  	  label="45°倾角自由液"
			  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="lostwater"
		  	  label="失水量"
			  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="no"
		  	  label="开钻次序"
			  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="solidtime"
		  	  label="稠化时间"
			  width="80">
		  	</el-table-column>
		  	<el-table-column
		  	  prop="temptime"
		  	  label="过渡时间"
			  width="80">
		  	</el-table-column>
		    </el-table>
		<div class="headerstyle">固井</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import {GetAllWellNames} from '../../../api/module/cementingQuality/ConstructionQualityEvaluation.js'
import {FindCasesizeByWellname,findDensityAndSolidTimeByWellNameAndCaseSize} from '../../../api/module/statisticalAnalysis/DataContrast.js'
	export default{
		// created() {
		// 	this.showbar();
		// },
		mounted() {
			// this.showbar();
			this.GetAllWellNames();
		},
		data(){
			return{
				
				selectBool:false,
				designDensityAndSolidTime:[],//水泥浆设计数据表格
				realDensityAndSolidTime:[],//水泥浆实际数据表格
				// rowStyle: { height: '30px' },
				// cellStyle: {
				// 	padding: 0,
				// 	// 'border-bottom': '1px solid #111111',
				// 	// 'border-right': '1px solid #111111'
				// },
				allwellnames:[],
				state2: '',
				caselevelOptions:[],
				casesize:'',
				option:{
					tooltip: {},
					legend:{
						show:true,
						// data:['Mon','Tue']
					},
					color:['#2f4554','#61a0a8'],
				    xAxis: {
				        type: 'category',
				        data: ['密度', '稠化时间']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
						name:'设计',
				        data: [],
				        type: 'bar'
				    },{
						name:'实际',
				        data: [],
				        type: 'bar'
				    }]
				}
			}
		},
		methods:{
			 querySearch(queryString,cb) {
				var allwellnames = this.allwellnames;
				var results = queryString ? allwellnames.filter(this.createFilter(queryString)) : allwellnames;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			 createFilter(queryString) {
				return (allwellnames) => {
				  return (allwellnames.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			showbar(){
				var chartDom = document.getElementById('main');
				console.log(chartDom)
				var myChart = echarts.init(chartDom);
				myChart.setOption(this.option);
			},
			FindCasesizeByWellname(){
				FindCasesizeByWellname(this.state2).then(res=>{
					console.log(this.state2)
					console.log(res.data)
					for(let i=0;i<res.data.length;i++){
						if(res.data[i]==null){
							res.data[i]=''
						}
					}
					this.caselevelOptions=res.data
				})
			},
			findDensityAndSolidTimeByWellNameAndCaseSize(){
				findDensityAndSolidTimeByWellNameAndCaseSize(this.state2,this.casesize).then(res=>{
					console.log(res)
					this.designDensityAndSolidTime=res.data.designDensityAndSolidTime
					this.realDensityAndSolidTime=res.data.realDensityAndSolidTime
					for(let i=0;i<res.data.designDensityAndSolidTime.length;i++){
						if(res.data.designDensityAndSolidTime[i]!=null){
							this.option.series[0].data.push(res.data.designDensityAndSolidTime[i].density)
							this.option.series[0].data.push(res.data.designDensityAndSolidTime[i].solidtime)
						}
					}
					for(let i=0;i<res.data.realDensityAndSolidTime.length;i++){
						if(res.data.realDensityAndSolidTime[i]!=null){
							this.option.series[1].data.push(res.data.realDensityAndSolidTime[i].density)
							this.option.series[1].data.push(res.data.realDensityAndSolidTime[i].solidtime)
						}
					}
					this.showbar()
					this.$message.success("查询成功")
				})
			},
			submitSearchModel(){
				this.findDensityAndSolidTimeByWellNameAndCaseSize()
			},
			handleSelect(){
				this.FindCasesizeByWellname()
				console.log(this.state2)
			},
			GetAllWellNames(){
				GetAllWellNames().then(res=>{
					console.log(res.data)
					// this.allwellnames=res.data
					for(let i=0;i<res.data.length;i++){
						this.allwellnames.push({value:res.data[i]})
					}
					console.log(this.allwellnames)
				})
			}
		}
	}
</script>

<style scoped="scoped">
.headerstyle {
	font-size: 17px;
	background-color: #eef0f6;
	height: 30px;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.designstyle {
	font-size: 14px;
	background-color: #eef0f6;
	height: 20px;
	padding: 5px 10px;
	margin-bottom: 5px;
	margin-top: 2px;
}	
</style>
